<template>
    <div>
        <el-page-header content="企业中心" icon="" title="企业管理"></el-page-header>
        
        <el-form
        :model="companyForm"
        :rules="companyFormRules"
        ref="companyFormRef"
        label-width="100px"
        class="demo-ruleForm"
        >            
            <el-form-item label="公司名称" prop="companyName">
                <el-input v-model="companyForm.companyName"></el-input>
            </el-form-item>
            <el-form-item label="法定代表人" prop="legalRepresentative">
                <el-input v-model="companyForm.legalRepresentative"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="companyPhone">
                <el-input v-model="companyForm.companyPhone"></el-input>
            </el-form-item>
            <el-form-item label="成立日期" prop="establishmentDate">
                <el-input type="date" v-model="companyForm.establishmentDate"></el-input>              
            </el-form-item>   
            <el-form-item label="公司类型" prop="companyType">
                <el-select v-model="companyForm.companyType" placeholder="请选择类型" style="width:100%">
                    <el-option
                    v-for="item in option"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                    </el-option>                    
                </el-select>
            </el-form-item>            
            <el-form-item label="注册资本" prop="registeredCapital">
                <el-input v-model="companyForm.registeredCapital"></el-input>
            </el-form-item>                     
            <el-form-item label="公司地址" prop="companyAddress">
                <el-input v-model="companyForm.companyAddress"></el-input>
            </el-form-item>            
            <el-form-item label="公司邮箱" prop="companyEmail">
                <el-input v-model="companyForm.companyEmail"></el-input>
            </el-form-item> 
            <el-form-item label="公司简介" prop="companyProfile">
                <el-input v-model="companyForm.companyProfile" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
            </el-form-item>            
            <el-button style="margin-left:27%" type="primary" :disabled="typeof companyId === 'number' ? true :false"  @click="submitForm()">添加企业</el-button>
            <el-button style="margin-left:27%" type="primary" @click="updateForm()">更新企业</el-button>
        </el-form>
    </div>
        
</template>

<script setup>
import {ref,reactive} from 'vue'
import {ElMessage} from 'element-plus'
import {addCompnayAPI,updateCompanyAPI} from '@/api'
import { useStore } from "vuex"
import moment from 'moment'

// const whichTime=time=>{
//   return moment(time).format('ll')
// }
const store = useStore()
const companyFormRef=ref()

// 获取公司信息
let {companyId,companyName, companyType, registeredCapital, establishmentDate,legalRepresentative,companyAddress,companyPhone,companyEmail,companyProfile}=store.state.companyData
// let establishmentDate1=()=>{
//     console.log( moment(establishmentDate).format('YYYY/MM/DD'));
//     return moment(establishmentDate).format('YYYY/MM/DD')
// }
// establishmentDate1()
// let {establishmentDate} = establishmentDate1
const companyForm=reactive({
    companyId,
    companyName,
    companyType,    //0国有企业 1私营企业 2外资企业 3其他
    registeredCapital, 
    establishmentDate,
    legalRepresentative,
    companyAddress,
    companyPhone,
    companyEmail,
    companyProfile
})
// 权限选择
// 0 国有企业
// 1 私营企业
// 2 外资企业
// 3 其他
const option=[
    {label: '国有企业', value: 0},
    {label: '私营企业', value: 1},
    {label: '外资企业', value: 2},
    {label: '其他', value: 3},
]

const companyFormRules=reactive({
    companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
    companyPhone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        { message: "请正确填写座机：区号-号码", trigger: "blur",pattern: /^(\d{3,4}-)?\d{5,8}$/}
    ],
    legalRepresentative: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
    // establishmentDate: [{ required: true, message: '请输入正确格式', trigger: 'blur' , pattern:/^\d{4}-\d{2}-\d{2}$/}],
    companyEmail:[{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]
})



// 添加公司
const submitForm=()=>{
    companyFormRef.value.validate(async valid=>{
        if(valid){
            const {data:res}=await addCompnayAPI(companyForm)
            if (res.status !== 0) {
                ElMessage.error('添加失败');
                return
            }
            store.dispatch("getAllCompany")
            ElMessage.success('添加成功')    
        }
    })
}

// 更新提交
const updateForm = () => {    
    companyFormRef.value.validate(async valid => {
        if (valid) {
            // console.log('res', companyForm.establishmentDate);
            companyForm.companyId = companyId
            const { data: res } = await updateCompanyAPI(companyForm)
            if (res.status !== 0) {
                console.log('err', err);
                ElMessage.error('更新失败');
                return
            }
            
            console.log('res', companyForm.establishmentDate);
            ElMessage.success('更新成功')
            // 更新用户信息传给store
            store.commit('updateCompany', companyForm)
        }
    })
}

</script>

<style lang="scss" scoped>
.demo-ruleForm{
    margin-top: 50px;
}
</style>